<template>
  <view class="ranking">
    <uni-section class="mb-10" title="优惠券销售排行榜" type="line">
      <template v-slot:decoration>
        <view class="decoration"></view>
      </template>
    </uni-section>
    <view class="body-tab">
      <view
        class="tab-item"
        v-for="(item, index) in ['日数据', '周数据', '月数据']"
        :key="index"
      >
        {{ item }}
      </view>
    </view>
    <view class="body-list">
      <view class="list-item" v-for="(item, index) in rankingList" :key="index">
        <view>{{ index + 1 }}</view>
        <view>{{ item.userNickname }}</view>
        <view>{{ item.totalSales }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getRankingListAPI } from "@/services/goodsList.js";
export default {
  data() {
    return {
      title: "优惠券销售排行榜",
      rankingList: [],
    };
  },

  async mounted() {
    const res = await getRankingListAPI();
    this.rankingList = res.data;
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// .uni-section-header__decoration {
//   background-color: #27ba9b !important;
// }
  .decoration {
    width: 2rpx;
    height: 6rpx;
    margin-right: 4rpx;
    border-radius: 1rpx;
    background-color: #27ba9b;
  }
.ranking {


  .body-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    background-color: #fff;
    .tab-item {
      font-size: 28rpx;
      color: #333;
    }
  }

  .body-list {
    .list-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 80rpx;
      background-color: #fff;
      padding: 0 30rpx;
      view {
        text-align: center;
        width: 33%;
      }
    }
  }
}
</style>
